<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.Search"
        placeholder="搜索"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />

      <span class="filter-item-label">
        <el-tag size="large">状态</el-tag>
      </span>
      <el-select
        v-model="listQuery.Status"
        placeholder="状态"
        style="width: 200px"
        class="filter-item"
      >
        <el-option
          v-for="item in statusOptionsFilter"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        点击搜索
      </el-button>

      <el-button type="primary" icon="el-icon-plus" class="filter-item" @click="handleAdd">新增超市</el-button>
    </div>

    <el-table v-loading="listLoading" :data="listData.List" style="width: 100%;margin-top:30px;" border>
      <el-table-column align="center" label="ID" width="100">
        <template slot-scope="scope">
          {{ scope.row.ID }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="名称" width="220">
        <template slot-scope="scope">
          {{ scope.row.Name }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="联系方式">
        <template slot-scope="scope">
          {{ scope.row.Contact }}
        </template>
      </el-table-column>
      <el-table-column align="header-center" label="状态" width="100">
        <template slot-scope="scope">
          <el-tag
            size="large"
            :type="scope.row.Status == 1 ? 'primary': 'danger'"
>{{ scope.row.StatusDisplay }}</el-tag>
        </template>
      </el-table-column>

      <!-- <el-table-column align="header-center" label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.CreatedAt }}
          </template>
        </el-table-column> -->
      <el-table-column align="header-center" label="最后更新时间">
        <template slot-scope="scope">
          {{ scope.row.UpdatedAt }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" icon="el-icon-edit" @click="handleEdit(scope)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="listData.Total > 0"
      :total="listData.Total"
      :page.sync="listQuery.Page"
      :limit.sync="listQuery.PageSize"
      @pagination="getListData"
    />

    <el-dialog :visible.sync="dialogVisible" :title="dialogType === 'edit' ? '编辑超市' : '新增超市'">
      <el-form :model="oneData" label-width="80px" label-position="left">
        <el-form-item label="名称">
          <el-input
            v-model="oneData.Name"
            placeholder="超市名称"
            minlength="1"
            show-word-limit
/>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input
            v-model="oneData.Contact"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            placeholder="联系方式"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="oneData.Status"
            placeholder="状态"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmRole">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deepClone } from '@/utils'
import * as data_dict from '@/dict/supermarket'
import * as data_api from '@/api/warehouse/supermarket'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

const defaultData = {
  ID: 0,
  Name: '',
  Contact: '',
  Status: data_dict.SupermarketStatus_Cooperating,
  CreatedAt: '',
  UpdatedAt: ''
}

export default {
  components: { Pagination },
  data() {
    return {
      listData: {
        List: [],
        Total: 0
      },
      listLoading: false,
      listQuery: {
        Page: 1,
        PageSize: 10,
        Status: data_dict.SupermarketStatus_Any,
        Search: '',
        Sorts: 'updated_at DESC',
        SupermarketIDs: [],
      },
      oneData: Object.assign({}, defaultData),
      dialogVisible: false,
      dialogType: 'new',

    }
  },
  computed: {
    statusOptions() {
      const ret = Array.from(data_dict.SupermarketStatusDisplayMapping, ([value, label]) => ({
        value,
        label
      })).filter(item => item.value !== data_dict.SupermarketStatus_Any)
      // console.log(ret)
      return ret
    },

    statusOptionsFilter() {
      const ret = Array.from(data_dict.SupermarketStatusDisplayMapping, ([value, label]) => ({
        value,
        label
      }))
      // console.log(ret)
      return ret
    },
  },
  created() {
    this.getListData()
  },
  methods: {
    getListData() {
      this.listLoading = true
      data_api.list(this.listQuery).then(res => {
        this.listData = res.data
        this.normalizeData()
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },

    normalizeData() {
      this.listData.List.forEach(item => {
        item.StatusDisplay = data_dict.getSupermarketStatusDisplay(item.Status)
      })
    },

    handleFilter() {
      this.listQuery.Page = 1
      this.getListData()
    },

    async confirmRole() {
      const isEdit = this.dialogType === 'edit'
      console.log(this.oneData)

      if (!isEdit) {
        await data_api.create(this.oneData)
        this.dialogVisible = false
        this.$message({
          type: 'success',
          message: `新增超市: ${this.oneData.Name} 成功`
        })
      } else {
        await data_api.update(this.oneData)
        this.dialogVisible = false
        this.$message({
          type: 'success',
          message: 'Update succed!'
        })
      }
      this.getListData()
    },
    handleAdd() {
      this.oneData = Object.assign({}, defaultData)
      this.oneData.name
      this.dialogType = 'new'
      this.dialogVisible = true
    },
    handleEdit(scope) {
      this.dialogType = 'edit'
      this.dialogVisible = true
      this.oneData = deepClone(scope.row)
    },
  }
}
</script>

  <style lang="scss" scoped>
  .app-container {
    .roles-table {
      margin-top: 30px;
    }
  }
</style>
